<template>
	<view class="">
		<view class="operate_bar">
			<text>全选</text>
			<text>删除</text>
		</view>
		<view class="goods_list">
			<GoodsList :list="list" :show_check="true" />
		</view>
		<view class="settle_wrap">
			<view class="settle_box">
				<tn-checkbox-group>
					<tn-checkbox v-model="value" activeColor="#AAAAAA" shape="circle"
						@change="radio_change">全选</tn-checkbox>
				</tn-checkbox-group>
				<view class="">
					<text class="total_title">合计</text> <text class="total_unit">¥</text><text class="total">3</text>
					<tn-button backgroundColor="#01BEFF" fontColor="#fff" shape="round" class="cart_btn">去结算</tn-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsList from '@/components/goods_list.vue';
	export default {
		components: {
			GoodsList
		},
		data() {
			return {
				value: "",
				loading: false,
				list: [{
					img_path: '/static/goods/apple.jpg',
					name: '土豆',
					price: 1.5,
					unit: '斤',
					number: 1,
					selected: true,
					show_check: false
				}]
			}
		},
		onLoad() {
			this.loadMoreData(); // 初始化加载数据
		},
		onReachBottom() {
			this.loadMoreData();
		},
		methods: {
			async loadMoreData() {
				if (this.loading) return; // 防止重复加载
				this.loading = true;
				console.log('开始加载数据'); // 打印日志
				try {
					const newData = await this.fetchData(this.page); // 获取新数据
					console.log('新数据:', newData); // 打印新数据
					if (newData.length > 0) {
						this.list = this.list.concat(newData);
						this.page++;
					} else {
						console.log('没有更多数据'); // 打印没有更多数据
					}
				} catch (error) {
					console.error('加载数据失败', error);
				} finally {
					this.loading = false;
					console.log('数据加载完成'); // 打印日志
				}
			},
			fetchData(page) {
				// 模拟请求数据的函数，可以替换为实际请求
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve(this.list);
					}, 1000);
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods_list {
		height: calc(100vh - 360rpx);
		overflow: scroll;
	}

	.cart_btn {
		width: 240rpx !important;
		height: 70rpx !important;
		font-size: 34rpx !important;
	}

	::v-deep .tn-checkbox__icon-wrap--checked {
		background-color: #01BEFF !important;
		border-color: #01BEFF !important;
	}

	::v-deep .tn-checkbox__icon-wrap {
		border: 1rpx solid #999 !important;
		width: 40rpx !important;
		height: 40rpx !important;
	}

	.goods_wrap {
		width: 100%;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 4rpx solid #efeaea;

		.img {
			// width: 150rpx;
			height: 120rpx;
		}



		.goods_info {
			margin-left: 40rpx;

			.name {
				margin-bottom: 15rpx;
				font-size: 40rpx;
			}

			.price {
				margin-top: 10rpx;
				font-size: 36rpx;
				color: red;
				font-weight: 600;
			}
		}
	}

	.operate_bar {
		background-color: #eee;
		padding: 10rpx 20rpx;

		text {
			margin-right: 30rpx;
			font-size: 32rpx;
		}
	}

	.settle_box {
		width: 100vw;
		padding: 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		border-top: 2rpx solid #eee;

		// align-items: center;
		.total_title {
			font-size: 30rpx;
		}

		.total_unit {
			margin-left: 10rpx;
			font-size: 32rpx;
			color: orangered;
			font-weight: bolder;
		}

		.total {
			margin-left: 5rpx;
			margin-right: 20rpx;
			font-size: 40rpx;
			color: orangered;
			font-weight: bolder;
		}
	}
</style>